<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sprint Backlog</title>
<script type="text/javascript" src="<%= request.getContextPath() %>/js/prototype.js" ></script>
<script src="<%= request.getContextPath() %>/js/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
function doOnload() {
	Sortable.create('sprint-tasks', {});
}
function addTask() {
	Sortable.destroy( 'sprint-tasks' );
	var last = $("sprint-tasks").getElementsByClassName("last");
	for (i = 0; i <last.length; i++) {
		last[i].removeClassName("last");
	}
	
	var taskItem = document.createElement("li");
	taskItem.innerHTML = $("sprint-task-template").innerHTML;
	taskItem.addClassName("sprint-task last");
	var children = $("sprint-tasks").childElements();
	var index = children.length;
	var odd = !(index % 2);  
	if (odd) { 
		taskItem.addClassName("odd");
	}
	$("sprint-tasks").appendChild(taskItem);
	Sortable.create('sprint-tasks', {});
}
function reIndex() {
	var children = $("sprint-tasks").childElements();
	for (c = 0; c < children.length; c++) {
		var inputs = children[c].getElementsBySelector("input");
		for (i = 0; i < inputs.length; i++) {
			if (inputs[i].name != null) {
				inputs[i].name = inputs[i].name.replace(/tasks\x5B\d+\x5D/, "tasks["+ c.toString() +"]");
			}
		}
	}
}
function saveBacklog() {
	reIndex();
}
</script>
<style type="text/css">
.toolbox {
	margin-bottom: 5px;
}
#sprint-backlog-head, table.sprint-task {
	border-collapse: collapse;
	border-spacing: 0px;
	width: auto;
}
#sprint-backlog-head {
	border: 2px solid #000000;
}
table.sprint-task {
	border: 1px;
	border-left: 2px solid #000000;;
	border-right: 2px solid #000000;;
}
li.last table.sprint-task {
	border-bottom: 2px solid #000000;;
}
#sprint-backlog-head th {
	border: 1px solid #AAAAAA;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	overflow: hidden;
} 
table.sprint-task td {
	border-left: 1px solid #AAAAAA;
	border-right: 1px solid #AAAAAA;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
#sprint-task-template {
	display: none;
}
#sprint-tasks {
	list-style: none;
	padding-left: 0px;
	margin-top: 0px;
}
#sprint-tasks li.sprint-task {
	margin-left: 0px;
	padding-left: 0px;
}
#sprint-tasks li.odd td, #sprint-tasks li.odd input {
	background-color: #ECECEC;
}
.sprint-task td input {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	border: 0px;
}
#sprint-tasks li.sprint-task td input:focus {
	background-color: #ffffcc;
}
.task-id {
	min-width: 50px;
	width: 50px;
	text-align: center;
}
.task-code {
	min-width: 50px;
	width: 50px;
}
.task-headline {
	min-width: 300px;
	width: 300px;
}
.task-person {
	min-width: 150px;
	width: 150px;
}
.task-left-effort {
	min-width: 50px;
	width: 50px;
	overflow: hidden;
}

</style>
</head>
<body onload="doOnload()">
<div id="sprint-backlog">
	<s:form id="sprint-backlog-editor" namespace="/backlog" action="save">
		<div class="sprint-summary">
			<s:hidden name="backlog.id"></s:hidden>
			<p>标题<s:textfield name="backlog.sprintNumber" maxlength="8"/><s:textfield name="backlog.headline" maxlength="256"/></p>
			<p>天数<s:textfield name="backlog.day" maxlength="3"/></p>
			<p>开始日期 <input name="backlog.start" value="<s:date name="backlog.start" format="yyyy-MM-dd"/>" maxlength="10"></input></p>
		</div>
		
		<div class="sprint-tasks">
			<div class="toolbox">
			<a onclick="addTask()" href="#">增加</a>
			</div>
			<table id="sprint-backlog-head">
				<thead>
					<tr>
						<th rowspan="3" class="task-id"><span class="task-id">#</span></th>
						<th rowspan="3" class="task-code">Code</th>
						<th rowspan="3" class="task-headline">Task</th>
						<th rowspan="3" class="task-person">P1</th>
						<th rowspan="3" class="task-person">P2</th>
						<th colspan="<s:property value="backlog.day"/>">Left Effort</th>
					</tr>
					<tr>
						<s:iterator value="backlog.leftEfforts" status="status">
						
						<th class="task-left-effort"><span title="<s:date name="backlog.dates[#status.index]" format="yyyy年MM月dd日"/>"><s:property value="backlog.day - #status.index"/></span></th>
						</s:iterator>
					</tr>
					<tr>
						<s:iterator value="backlog.leftEfforts" status="status">
						<th class="task-left-effort"><s:text name="format.number"><s:param name="value" value="backlog.leftEfforts[#status.index]" /></s:text></th>
						</s:iterator>
					</tr>
				</thead>
			</table>
			
				<ul id="sprint-tasks">
					<s:iterator value="backlog.tasks" status="taskStatus">
					<li class="sprint-task <s:if test="#taskStatus.odd">odd</s:if> <s:if test="#taskStatus.last">last</s:if>">
						<table class="sprint-task">
							<tr class="sprint-task">
								<td class="task-id">
									<input type="hidden" name="backlog.tasks[0].id" value="<s:property value="id"/>"></input>
									<s:property value="id" />
								</td>
								<td class="task-code">
									<input type="text" name="backlog.tasks[0].code" value="<s:property value="code"/>">
								</td>
								<td class="task-headline"><input type="text" name="backlog.tasks[0].headline" value="<s:property value="headline"/>"></input></td>
								<td class="task-person"><input type="text" name="backlog.tasks[0].pair.personOne" value="<s:property value="pair.personOne"/>"></input></td>
								<td class="task-person"><input type="text" name="backlog.tasks[0].pair.personTwo" value="<s:property value="pair.personTwo"/>"></input></td>
								<s:iterator value="backlog.leftEfforts" status="status">
								<td class="task-left-effort"><input type="text" name="backlog.tasks[0].leftEfforts[<s:property value="#status.index"/>]"  value="<s:property value="leftEfforts[#status.index]" />"></td>
								</s:iterator>
							</tr>
						</table>
					</li>
					</s:iterator>
				</ul>
				<s:submit onclick="saveBacklog()"></s:submit>
			
		</div>
	</s:form>
	<img src="<%= request.getContextPath() %>/backlog/<s:property value="backlog.id"/>/burndown.action">
	<div id="sprint-task-template">
		<table class="sprint-task">
			<tr class="sprint-task">
				<td class="task-id">
					<input type="hidden" name="backlog.tasks[0].id"></input>
					<s:property value="id"/></input>
				</td>
				<td class="task-code">
					<input type="text" name="backlog.tasks[0].code" value="<s:property value="code"/>">
				</td>
				<td class="task-headline"><input type="text" name="backlog.tasks[0].headline"></input></td>
				<td class="task-person"><input type="text" name="backlog.tasks[0].pair.personOne"></input></td>
				<td class="task-person"><input type="text" name="backlog.tasks[0].pair.personTwo"></input></td>
				<s:iterator value="backlog.leftEfforts" status="status">
				<td class="task-left-effort"><input type="text" name="backlog.tasks[0].leftEfforts[<s:property value="#status.index"/>]"></td>
				</s:iterator>
			</tr>
		</table>
	</div>
</div>
</body>
</html>